<script setup lang="ts">
import { ref, computed } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";

// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});

// 初始化ECharts
const chartRef = ref();
const { setOptions } = useECharts(chartRef, { theme });

// 根据配置项渲染ECharts
setOptions({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "line",
      lineStyle: {
        color: "rgba(0,0,0,0.2)",
        width: 1,
        type: "solid"
      }
    }
  },
  legend: {
    top: 20,
    data: ["河流一", "河流二", "河流三", "河流四", "河流五"]
  },
  singleAxis: {
    top: 50,
    bottom: 50,
    axisTick: {},
    axisLabel: {},
    type: "time",
    axisPointer: {
      animation: true,
      label: {
        show: true
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: "dashed",
        opacity: 0.2
      }
    }
  },
  series: [
    {
      type: "themeRiver",
      emphasis: {
        itemStyle: {
          shadowBlur: 20,
          shadowColor: "rgba(0, 0, 0, 0.8)"
        }
      },
      data: [
        ["2024/11/08", 10, "河流一"],
        ["2024/11/09", 15, "河流一"],
        ["2024/11/10", 35, "河流一"],
        ["2024/11/11", 38, "河流一"],
        ["2024/11/12", 22, "河流一"],
        ["2024/11/13", 16, "河流一"],
        ["2024/11/14", 7, "河流一"],
        ["2024/11/15", 2, "河流一"],
        ["2024/11/16", 17, "河流一"],
        ["2024/11/17", 33, "河流一"],
        ["2024/11/18", 40, "河流一"],
        ["2024/11/19", 32, "河流一"],
        ["2024/11/20", 26, "河流一"],
        ["2024/11/21", 35, "河流一"],
        ["2024/11/22", 40, "河流一"],
        ["2024/11/23", 32, "河流一"],
        ["2024/11/24", 26, "河流一"],
        ["2024/11/25", 22, "河流一"],
        ["2024/11/26", 16, "河流一"],
        ["2024/11/27", 22, "河流一"],
        ["2024/11/28", 10, "河流一"],
        ["2024/11/08", 35, "河流二"],
        ["2024/11/09", 36, "河流二"],
        ["2024/11/10", 37, "河流二"],
        ["2024/11/11", 22, "河流二"],
        ["2024/11/12", 24, "河流二"],
        ["2024/11/13", 26, "河流二"],
        ["2024/11/14", 34, "河流二"],
        ["2024/11/15", 21, "河流二"],
        ["2024/11/16", 18, "河流二"],
        ["2024/11/17", 45, "河流二"],
        ["2024/11/18", 32, "河流二"],
        ["2024/11/19", 35, "河流二"],
        ["2024/11/20", 30, "河流二"],
        ["2024/11/21", 28, "河流二"],
        ["2024/11/22", 27, "河流二"],
        ["2024/11/23", 26, "河流二"],
        ["2024/11/24", 15, "河流二"],
        ["2024/11/25", 30, "河流二"],
        ["2024/11/26", 35, "河流二"],
        ["2024/11/27", 42, "河流二"],
        ["2024/11/28", 42, "河流二"],
        ["2024/11/08", 21, "河流三"],
        ["2024/11/09", 25, "河流三"],
        ["2024/11/10", 27, "河流三"],
        ["2024/11/11", 23, "河流三"],
        ["2024/11/12", 24, "河流三"],
        ["2024/11/13", 21, "河流三"],
        ["2024/11/14", 35, "河流三"],
        ["2024/11/15", 39, "河流三"],
        ["2024/11/16", 40, "河流三"],
        ["2024/11/17", 36, "河流三"],
        ["2024/11/18", 33, "河流三"],
        ["2024/11/19", 43, "河流三"],
        ["2024/11/20", 40, "河流三"],
        ["2024/11/21", 34, "河流三"],
        ["2024/11/22", 28, "河流三"],
        ["2024/11/23", 26, "河流三"],
        ["2024/11/24", 37, "河流三"],
        ["2024/11/25", 41, "河流三"],
        ["2024/11/26", 46, "河流三"],
        ["2024/11/27", 47, "河流三"],
        ["2024/11/28", 41, "河流三"],
        ["2024/11/08", 10, "河流四"],
        ["2024/11/09", 15, "河流四"],
        ["2024/11/10", 35, "河流四"],
        ["2024/11/11", 38, "河流四"],
        ["2024/11/12", 22, "河流四"],
        ["2024/11/13", 16, "河流四"],
        ["2024/11/14", 7, "河流四"],
        ["2024/11/15", 2, "河流四"],
        ["2024/11/16", 17, "河流四"],
        ["2024/11/17", 33, "河流四"],
        ["2024/11/18", 40, "河流四"],
        ["2024/11/19", 32, "河流四"],
        ["2024/11/20", 26, "河流四"],
        ["2024/11/21", 35, "河流四"],
        ["2024/11/22", 40, "河流四"],
        ["2024/11/23", 32, "河流四"],
        ["2024/11/24", 26, "河流四"],
        ["2024/11/25", 22, "河流四"],
        ["2024/11/26", 16, "河流四"],
        ["2024/11/27", 22, "河流四"],
        ["2024/11/28", 10, "河流四"],
        ["2024/11/08", 10, "河流五"],
        ["2024/11/09", 15, "河流五"],
        ["2024/11/10", 35, "河流五"],
        ["2024/11/11", 38, "河流五"],
        ["2024/11/12", 22, "河流五"],
        ["2024/11/13", 16, "河流五"],
        ["2024/11/14", 7, "河流五"],
        ["2024/11/15", 2, "河流五"],
        ["2024/11/16", 17, "河流五"],
        ["2024/11/17", 33, "河流五"],
        ["2024/11/18", 40, "河流五"],
        ["2024/11/19", 32, "河流五"],
        ["2024/11/20", 26, "河流五"],
        ["2024/11/21", 35, "河流五"],
        ["2024/11/22", 4, "河流五"],
        ["2024/11/23", 32, "河流五"],
        ["2024/11/24", 26, "河流五"],
        ["2024/11/25", 22, "河流五"],
        ["2024/11/26", 16, "河流五"],
        ["2024/11/27", 22, "河流五"],
        ["2024/11/28", 10, "河流五"]
      ]
    }
  ]
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 40vh" />
</template>
